window.onload = function(){
  var fouse = document.querySelector(".fouse");
  var before = document.querySelector(".before");
  var last = document.querySelector(".last");

  // 两侧的按钮显示隐藏
  fouse.addEventListener("mouseenter" , function(){
    before.style.display = "block";
    last.style.display = "block";

    // 鼠标移入停止定时器
    clearInterval(timer);
  });

  fouse.addEventListener("mouseleave" , function(){
    before.style.display = "none";
    last.style.display = "none";

    timer = setInterval(function () {
      last.click();
    }, 3000);
  });

  // 自动化生成下面小圆点
  var circle = document.querySelector(".circle");
  var navImg = document.querySelector(".navImg").children;
  for(var i=0 ; i<navImg.length ; i++){
    var li = document.createElement("li");
    circle.appendChild(li);
  }
  // console.log(navImg[0].clientWidth);

  // 动态设置circle居中
  var circle_center = (navImg[0].offsetWidth - circle.offsetWidth) / 2;
  // console.log(circle_center);
  circle.style.left = circle_center + "px";

  // 小圆圈排他思想实现
  var circleLi = circle.children;
  var navUl = document.querySelector(".navUl");
  // 动态设置navUl的长度
  navUl.style.width = (navImg.length + 1) * navImg[0].offsetWidth + "px";
  
  // 获取fouse的长度
  var fouseWidth = fouse.offsetWidth;
  for(var i=0 ; i<circleLi.length ; i++){
    // 设置自定义索引
    circleLi[i].setAttribute("data-index" , i);
    circleLi[i].addEventListener("click" , function(){
      for(var i=0 ; i<circleLi.length ; i++){
        circleLi[i].style.backgroundColor = "transparent";
      }
      this.style.backgroundColor = "#fff";
      // console.log(this.getAttribute("data-index"));
      var thisIndex = this.getAttribute("data-index");
      num = thisIndex;
      circle_num = thisIndex;
      var target = - fouseWidth * thisIndex;
      animation(navUl, target )
    });
  }

  // 克隆最后一张图片
  var first = navUl.children[0].cloneNode(true);
  navUl.appendChild(first);
  var num = 0;
  var circle_num = 0;
  last.addEventListener("click" , function(){
    console.log(flag);
      if(flag){
        flag = false;
        // console.log(navImg.length - 1);
        if (num == navImg.length - 1) {
          // console.log(123);
          navUl.style.left = 0;
          num = 0;
        }
        num++;
        // num = num >= navImg.length ? 0 : num;
        for (var i = 0; i < circleLi.length; i++) {
          circleLi[i].style.backgroundColor = "transparent";
        }

        circle_num++;
        circle_num = (circle_num == (navImg.length - 1)) ? 0 : circle_num;
        circleLi[circle_num].style.backgroundColor = "#fff";
        animation(navUl, -num * fouseWidth, function () {
          flag = true;
          console.log(flag);
        });
        
      }
    
  });


  // 设置节点流，使得点击的时候可以等图片显示完再进行点击
  var flag = true;

  before.addEventListener("click" , function(){
   if(flag){
    //  当点击后设置为false ， 在未运行完时不能再次点击
     flag = false;
     if (num == 0) {
       navUl.style.left = -(navImg[0].offsetWidth) * (navImg.length - 1) + "px";
       num = navImg.length - 1;
     }
     num--;
     // num = num < 0 ? navImg.length-1 : num;
     for (var i = 0; i < circleLi.length; i++) {
       circleLi[i].style.backgroundColor = "transparent";
     }
     circle_num--;
     // console.log(circle_num);
     circle_num = (circle_num < 0) ? (navImg.length - 2) : circle_num;
     // console.log(navImg.length-2);
     circleLi[circle_num].style.backgroundColor = "#fff";
     animation(navUl, -num * fouseWidth , function(){
      //  动画运行完重新设置flag为true ， 按钮可再次点击
       return flag = true;
     });
     console.log(flag);
   }
  });

  var timer = setInterval(function(){
    last.click();
  } , 3000);

}